<template>
  <div class="menu-wrapper">
    <company-dialog ref="companyDialog"  @confirm="companyConfirm"/>
    <office-dialog ref="officeDialog" @confirm="dialogConfirm"/>
    <el-form ref="memberForm" :model="form" :rules="rules" label-width="80px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;"></span>
      </div>
      <el-form-item label="企业编号" prop="code">
        <el-col :span="6">
          <el-input v-model="form.code"/>
        </el-col>
      </el-form-item>
      <el-form-item label="企业名称" prop="name">
        <el-col :span="6">
          <el-input v-model="form.name"/>
        </el-col>
      </el-form-item>
      <el-form-item label="企业分类" prop="companyCategory">
        <el-col :span="6">
          <el-input v-model="form.companyCategory" suffix-icon="el-icon-arrow-down" @focus="dialogShow"/>
        </el-col>
      </el-form-item>
        <el-form-item label="所属部门" prop="officeName">
          <el-col :span="6">
          <el-input v-model="officeName" suffix-icon="el-icon-arrow-down" @focus="officeShow"/>
          </el-col>
        </el-form-item>
      <el-form-item label="管理人员" prop="userId">
        <el-col :span="6">
        <el-select style="width: 100%" v-model="form.memberId"  :filter-method="remoteMethod" value-key="id" filterable placeholder="请选择"
                   @change="selectMember">
          <el-option
            v-for="item in memberList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="联系电话" prop="mobile">
        <el-col :span="6">
          <el-input v-model="form.mobile"/>
        </el-col>
      </el-form-item>
      <el-form-item label="所在地"  style="width: 550px">
        <Distpicker @selected="onSelected" :province="district.province" :city="district.city"
                    :area="district.area"></Distpicker>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-col :span="6">
          <el-input v-model="form.address"/>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="clicked" @click="saveMember('memberForm')">
          完 成
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped>
  .menu-wrapper {
    margin: 15px;
  }
</style>
<script>
  import {list as memberList} from '@/api/member'
  import OfficeDialog from '@/components/OfficeDialog'
  import {EventBus} from '@/api/eventBus'
  import utils from '../../utils/utils.js'
  import Distpicker from '@/components/Distpicker/Distpicker'
  import {save} from '@/api/company'
  import {checkUserExists} from '@/api/sysUser'
  import md5 from 'js-md5';
  import companyDialog from './dialog'

  export default {
    name: 'company-add',
    filters: {},
    components: {
      Distpicker, companyDialog,OfficeDialog
    },
    data() {
      return {
        clicked: false, // 按钮防双击
        officeName:'',
        memberList:[],

        district: {province: 440000, city: '广州市', area: '海珠区'},
        form: {
          name: '',
          mobile: '',
          address: '',
          areaId: 0,
          memberId:'',
          areaName: "string",
          // createDate: "2020-05-08T11:37:32.655Z",
          email: "string",
          enterpriseId: 0,
          // modifyDate: "2020-05-08T11:37:32.655Z",
          officeId: "string",
          phone: "123456456",
          code:'',
          userId: "string",
          companyCategory:""
        },
        topName: '',
        dateName:'出生日期',
        optionsType:'性别',
        optionsForm:[
          {name:'男',value:1},
          {name:'女',value:2}
        ],
        rules: {
          name: [
            {required: true, message: '请输入企业名称', trigger: 'blur'},
            {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
          ],
          mobile: [
            {required: false, message: '请输入联系电话', trigger: 'blur'}
          ],
          address: [
            {required: false, message: '请输入详细地址', trigger: 'blur'}
          ],
          code: [
            {required: true, message: '请输入企业编号', trigger: 'blur'}
          ],
          officeName: [
            {required: false, message: '请选择所属部门', trigger: 'blur'}
          ],
          companyCategory:[
            {required: true, message: '请点击选择所属组织', trigger: 'blur'}
          ]
        },
      }
    },
    props:[
      'memberType'
    ],
    created() {
      this.loadMember('');
    },
    methods: {
      onSelected(val) {
        if (!utils.isNull(val.area) && !utils.isNull(val.area.code)) {
          this.form.areaId = val.area.code;
          this.form.areaName = val.area.value;
        }
      },

      //会员选择
      loadMember(query) {
        var _this = this
        let params = new URLSearchParams();
        params.append('name',query)
        memberList(params).then(response => {
          console.log(response);
          _this.memberList = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
      }
      ,
      remoteMethod(query){
        this.loadMember(query)
      },
      selectMember(data) {

      },
      dialogShow() {
        console.log('点击了')
        this.$refs.companyDialog.show()
      },
      officeShow(){
        console.log('点击了')
        this.$refs.officeDialog.show()
      },
      dialogConfirm(val) {
        this.form.officeId = val.id;
        this.officeName = val.name
      },
      companyConfirm(val) {
        console.log(val)
        this.topName = val.name
        this.form.companyCategoryId = val.id
        this.form.companyCategory = val.name
        console.log(this.form)
      },
      saveMember(form) {
        const _this = this
        console.info("_this.memberType--"+_this.memberType)
        this.$refs[form].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true
            save(_this.form).then(response => {
              console.log("保存成功后返回的数据--"+JSON.stringify(response))
              _this.clicked = false
              if (response.type == 'success') {
                console.info("保存成功后的_this.memberType--"+_this.memberType)
                  EventBus.$emit('company-add', response.data)
                  _this.$store.dispatch('tagsView/delView', _this.$route).then(({visitedViews}) => {
                    _this.$router.push({
                      path: '/company/list'
                    })
                  })// 关闭当前tab回到列表
              } else {
                _this.$message({
                  message: response.content,
                  offset: 120,
                  center: true
                })
              }
            }).catch(error => {
              _this.clicked = false
            })
          } else {
            return false
          }
        })
      },
      memberTypeClick(val){
        console.log(val);
        var _this = this
        if (val == 0){
          _this.dateName = '出生日期';
          _this.optionsType = '性别';
          _this.optionsForm = [
            {name:'男',value:1},
            {name:'女',value:2}
          ]
        } else {
          _this.dateName = '创建日期';
          _this.optionsType = '企业类型';
          _this.optionsForm = [
            {name:'企业',value:1},
            {name:'事业单位',value:2}
          ]
        }
      }
    }
  }
</script>
